<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta
		  name="viewport"
		  content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover"
		/>
		<title>上传视频</title>
		<style type="text/css">
			video {
				
				width: 100vw;
				height: 50vw;
			}
		</style>
	</head>
	<body>
		<input type="file" id="file-input" />
		<video controls playsinline webkit-playsinline x5-video-player-type="h5-page" width="800" height="600" id="video" controls>
		</video>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
		<script type="text/javascript">
			var vConsole = new VConsole();
			var $fileInput = $('#file-input');

			$fileInput.change(function() {
				var file = this.files[0];
				var url = getObjectURL(this.files[0])
				console.log(url) /*文件类型*/
				$('#video').attr('src',url);
			});

			//建立一个可存取到该file的url
			function getObjectURL(file) {
				var url = null;
				if (window.createObjectURL != undefined) { // basic
					url = window.createObjectURL(file);
				} else if (window.URL != undefined) { // mozilla(firefox)
					url = window.URL.createObjectURL(file);
				} else if (window.webkitURL != undefined) { // webkit or chrome
					url = window.webkitURL.createObjectURL(file);
				}
				return url;
			}
		</script>
	</body>
</html>
